How I Created a Google Clone with HTML and CSS

Faraz

By Faraz - Last Updated:

Learn how to create a Google search page clone using HTML and CSS in this beginner-friendly tutorial. Follow step-by-step instructions to build your own web development project.

Join us on Telegram
i built a clone of google using html and css.png
Read Alsouse html css and javascript to build your own music player.jpgUse HTML, CSS and JavaScript to Build Your Own Music Player

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

We've all seen the Google homepage on our computers when we're surfing the web. What if that same site was made with CSS? Now it can be! Not only will you be able to learn about HTML and CSS for future projects, but you'll also be able to see how practical it is for having your own Google, LOL.

In this tutorial, you'll learn how to create a Google search page clone using HTML and CSS. This beginner-friendly tutorial is perfect for anyone who is just starting out with web development and wants to learn how to create a simple project using these two programming languages.

By the end of this tutorial, you'll have a better understanding of how HTML and CSS work together to create a functional website, and you'll have a cool new project to show off to your friends and colleagues.

Let's start making an amazing Google clone using HTML and Pure CSS step by step.

Join My Telegram Channel to Download the Project.

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Google search page clone.

The document includes several elements such as the <!DOCTYPE HTML> declaration, which specifies the version of HTML being used, and the <html> tags which define the start and end of the document. The <head> section includes metadata about the document such as the title, character encoding, and links to external files such as a CSS file with the href attribute.

The <body> section includes the visible content of the web page, which can include various elements such as headings, paragraphs, images, links, and more. The code snippet also includes a <header> element, which is a section that typically appears at the top of the page and can include branding, navigation links, and other content.

The <ul> element is an unordered list, which contains a series of <li> elements that define each item in the list. In this case, the list is part of the top bar and includes links to Gmail and Images. The code also includes an SVG graphic with the path elements that define the shape of the image.

Overall, HTML provides a structured way to organize and present content on the web, and this example illustrates some of the basic building blocks of an HTML document.

After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

This is the basic structure of our Google search page clone using HTML, and now we can move on to styling it using CSS.

Read AlsoCrafting a Responsive HTML and CSS Footer.jpgCrafting a Responsive HTML and CSS Footer (Source Code)

Step 2 (CSS Code):

Once the basic HTML structure of the Google search page clone is in place, the next step is to add styling to the Google search page clone using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our Google search page clone.

Here's a breakdown of the CSS code:

General Styles:

  • body:
    • font-family: Sets the font to Arial or sans-serif if Arial isn't available.
    • margin: 0: Removes default margin around the body.
    • font-size: 13px: Sets default font size for the body.

Header Styles:

  • header .topBar:
    • text-align: right: Aligns text to the right.
    • padding: 5px: Adds padding around the content.
    • font-size: 12px: Sets font size smaller than the body text.
    • color: rgba(0,0,0,.54): Sets the text color to a semi-transparent black.
  • header .leftOptions li:
    • display: inline-block: Places list items in a horizontal line.
    • margin-right: 12px: Adds space between list items.
    • vertical-align: middle: Aligns items to the middle vertically.
  • header .leftOptions li a:
    • text-decoration: none: Removes underlining from links.
    • color: #0f0f0f: Sets link text color to black.
  • header .leftOptions input:
    • Various styling for an input button, including:
      • border: Blue border.
      • font-weight: bold: Makes the text bold.
      • background: Adds a blue gradient background.
      • padding: 6px 12px: Adds internal spacing to the button.
      • color: white: Sets text color to white.
      • border-radius: 1px: Slightly rounds the corners.
  • header .leftOptions input
    • Adds a shadow effect when hovering over the button.
  • .topBarIcon:
    • Creates a small square (14x14px) to display an icon, aligned in the middle.
  • .topBarCircle:
    • Creates a larger circle (50x50px) for another icon or avatar.

Section (Search Area) Styles:

  • section .searchArea:
    • Centers text and adds a margin to the top.
  • section .searchArea .logo img:
    • Sets the height of the logo image to 72px.
  • section .searchArea .searchBox:
    • display: flex: Uses flexbox to position search elements.
  • section .searchArea .searchBox .searchBar:
    • flex: 1: Allows the search bar to grow to fill available space.
  • section .searchArea .searchBox .searchBar .search:
    • Styles a search input box with:
      • White background, a border, and rounded corners.
      • padding-left and padding-right: Adds internal spacing.
  • section .searchArea .searchBox .searchBar .search
    • Adds a shadow and changes border color when the search bar is hovered.
  • section .searchArea .searchButtons button:
    • Styles buttons with:
      • A light grey gradient background.
      • Padding and rounded corners.
      • Changes background, shadow, and text color when hovered.
  • section .searchArea .languageBar:
    • Adds margin to the top and decreases font size for language options.

Miscellaneous:

  • .inlineDisplay:
    • Aligns elements inline and vertically in the middle.
  • .searchIconSize:
    • Sets the size of search icons to 18x18px.
  • .voiceIconSize:
    • Sets the size of voice icons to 20x20px.
    • Adds a pointer cursor on hover.

Footer Styles:

  • footer .footerData:
    • Positions the footer at the bottom, with a background color, line-height, and a border at the top.
    • Styles text with a small font and a semi-transparent color.
  • .leftText, .rightText:
    • Aligns elements on the left and right using inline-block.
  • footer .footerBottom:
    • Adds another top border and styles links without underlines and with a semi-transparent black color.

This will give our Google search page clone an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

body{
  font-family: arial,sans-serif;
  margin:0;
  font-size: 13px;
}

header .topBar{
  text-align: right;
  padding: 5px;
  font-size: 12px;
color: rgba(0,0,0,.54);
}


header .leftOptions li{
  display: inline-block;
  margin-right: 12px;
  vertical-align: middle;
}
header .leftOptions li a{
  text-decoration: none;
  color: #0f0f0f;
}

header .leftOptions input{
  border: 1px solid #4285f4;
  font-weight: bold;
  outline: none;
  background: #4285f4;
  background: -webkit-linear-gradient(top,#4387fd,#4683ea);
  background: linear-gradient(top,#4387fd,#4683ea);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4387fd,endColorstr=#4683ea,GradientType=0);
  padding: 6px 12px;
  font-size: 10px;
  color: white;
  border-radius: 1px;
}
header .leftOptions input:hover{
  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.topBarIcon{
  display: inline-block;
  position: relative;
  height: 14px;
  width: 14px;
  vertical-align: middle;
}
.topBarCircle{
  height: 50px;
  width: 50px;
}

section .searchArea{
  text-align: center;
  margin-top: 55px;
}
section .searchArea .logo img{
  height: 72px;
}

section .searchArea .searchBox{
  display: flex;
}
section .searchArea .searchBox .searchBar{
  width: 120px;
  flex: 1;
  align-self: center;
}
section .searchArea .searchBox .searchBar .search{
  background: #ffffff;
  border: 1px solid #dfe1e5;
  box-shadow: none;
  border-radius: 24px;
  z-index: 3;
  height: 32px;
  margin: 15px auto;
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
}
section .searchArea .searchBox .searchBar .search input{
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  color: rgba(0,0,0,.87);
  word-wrap: break-word;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  height: 100%;
  width: 24em;
  font-size: 16px;
}

section .searchArea .searchBox .searchBar .search:hover{
  box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
  border-color: rgba(223,225,229,0);
}

section .searchArea .searchButtons button{
  background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  color: #5F6368;
  font-family: arial,sans-serif;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  line-height: 27px;
  height: 30px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
section .searchArea .searchButtons button:hover{
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-color: #f8f8f8;
  border: 1px solid #c6c6c6;
  color: #222;
}


section .searchArea .languageBar{
  margin-top: 20px;
  font-size: 9pt;
}
section .searchArea .languageBar a{
  margin-left: 5px;
}


.inlineDisplay{
  vertical-align: middle;
  display: inline-block;
}
.searchIconSize{
  height: 18px;
  width: 18px;
}

.voiceIconSize{
  height: 20px;
  width: 20px;
}
.voiceIconSize:hover{
cursor: pointer;
}

footer .footerData{
  position: absolute;
  bottom: 0;
  background: #f2f2f2;
  line-height: 30px;
  border-top: 1px solid #e4e4e4;
  min-width: 400px;
  width: 100%;
  font-size: 9pt;
  color: rgba(0,0,0,.54);
}
.leftText, .rightText{
  display: inline-block;
}
.footerData .countryBar{
  margin-left: 30px;
}
footer .footerBottom{
  border-top: 1px solid #e4e4e4;
}
footer .footerBottom a{
  text-decoration: none;
  color: rgba(0,0,0,.54);
  margin-left: 30px;
}
footer .footerBottom .rightText{
  float: right;
  margin-right: 30px;
}

Final Output:

i built a clone of google using html and css.gif
Read AlsoCreating a Tile Spinner Using HTML and CSS.jpgCreating a Tile Spinner Using HTML and CSS (Source Code)

Conclusion:

Congratulations on completing this tutorial on how to create a Google search page clone using HTML and CSS! By now, you should have a better understanding of how HTML and CSS work together to create a functional website.

Don't forget to take what you've learned here and apply it to your own web development projects. The more you practice, the better you'll get!

If you have any questions or need further assistance, don't hesitate to reach out to the web development community. There are many resources and forums available to help you on your journey.

Thank you for following along with this tutorial, and we hope you found it helpful and informative. Good luck with your future web development endeavors!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: google clone, html, css, web development tutorial, html tutorial, css tutorial, google search page clone
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺